<template>
  <div class="question-edit">
    <aside>
      <div class="edit-header">
        <el-checkbox v-model="hide">隐藏题号</el-checkbox>
        <el-checkbox v-model="random">题目随机</el-checkbox>
        <div class="header-right">
          <el-button size="mini" type="danger" @click="handleBack">返回</el-button>
          <el-button size="mini" type="primary" @click="handleSavaQuestion">保存</el-button>
          <!-- https://caohuatao.github.io/guide/#getmousecoordinate -->
        </div>
      </div>
      <el-container>
        <el-aside width="240px" :style="aside_height">
          <el-tabs v-model="activeName" stretch>
            <el-tab-pane label="题型选择" name="type">
              <div class="type-list">
                <el-collapse class="type-list-font">
                  <el-collapse-item title="选择题" name="1">
                    <div class="choose-list">
                      <el-row>
                        <el-col :span="12"><a href="javascript:void(0);" @click="handleAddQuestionDetail('choice')">单选</a></el-col>
                        <el-col :span="12"><a href="javascript:void(0);" @click="handleAddQuestionDetail('multiple-choice')">多选</a></el-col>
                      </el-row>
                    </div>
                  </el-collapse-item>
                  <el-collapse-item title="填空题" name="2">
                    <div class="choose-list">
                      <el-row>
                        <el-col :span="12"><a href="javascript:void(0);" @click="handleAddQuestionDetail('fill-blank')">填空</a></el-col>
                      </el-row>
                    </div>
                  </el-collapse-item>
                  <el-collapse-item title="文本" name="3">
                    <div class="choose-list">
                      <el-row>
                        <el-col :span="12"><a href="javascript:void(0);" @click="handleAddQuestionDetail('explain')">段落说明</a></el-col>
                      </el-row>
                    </div>
                  </el-collapse-item>
                  <el-collapse-item title="模板" name="4">
                    <div class="choose-list">
                      <el-row>
                        <el-col :span="12"><a href="javascript:void(0);">满意度</a></el-col>
                        <el-col :span="12"><a href="javascript:void(0);">量表</a></el-col>
                      </el-row>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </el-tab-pane>
            <el-tab-pane label="问卷大纲" name="outline">
              <ul class="ul-outline">
                <li v-for="item in mainQuestionDetailList" :key="item.no" @click="handleJump(item.no)">
                  <span style="color:red;">*</span>
                  <span>{{ item.indexOrder }}</span>
                  <span>{{ handleSubStringLength(item.caption,14) }}</span>
                </li>
              </ul>
            </el-tab-pane>
          </el-tabs>
        </el-aside>
        <el-main :style="aside_height">
          <ul class="infinite-list" style="overflow:auto">
            <el-row type="flex" justify="center">
              <el-col :span="24">
                <headerCaptionQuestion :btn-visible="currentClick === -1" :class="currentClick === -1 ? 'click_active' : ''" :question="question" @click.native="handleFocus(-1)" />
                <div v-for="(item) in allQuestionDetailList" :key="item.no">
                  <questionItem
                    :class="currentClick === item.no ? 'click_active' : ''"
                    :btn-visible="currentClick === item.no"
                    :question-detail="item"
                    :question="question"
                    @click.native="handleFocus(item.no)"
                    @delete="handleDeleteQuestion(item.no)"
                    @up="handleUpItem(item.no)"
                    @down="handleDownItem(item.no)"
                  />
                </div>
              </el-col>
            </el-row>
          </ul>
        </el-main>
      </el-container>
    </aside>
    <!-- 模态框 -->
    <div style="clear:both;">
      <el-dialog :title="title" :visible.sync="addDetailDialogVisible" :close-on-click-modal="false" :show-close="false">
        <chooseTable ref="chooseTable" :question-detail="addQuestionDetail" @close="handleCloseDetailDialog" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import ChooseTable from '@/components/ChooseTable'
import HeaderCaptionQuestion from '@/views/questionnaire/components/header-caption-question'
import QuestionItem from '@/views/questionnaire/components/question-item'
import { getQuestionDetailListByQuestionId, updateQuestion } from '@/api/questionnaire'
import { questionSort } from '@/utils/questionnaire-util'

export default {
  components: {
    HeaderCaptionQuestion,
    QuestionItem,
    ChooseTable
  },
  data() {
    return {
      type: 'add', // 添加还是更新
      question: {}, // 问卷
      hide: false, // 是否隐藏题号
      random: false, // 是否题目随机
      activeName: 'type',
      width: window.innerHeight, // 当前窗口的高度 document.body.clientWidth
      currentClick: -2, // 用于点击选中
      addQuestionDetail: {}, // 增加
      addDetailDialogVisible: false,
      title: '新增'
    }
  },
  computed: {
    aside_height: function() {
      return 'height:' + (this.width - 144) + 'px;'
    },
    mainQuestionDetailList: function() {
      return !this.question || !this.question.questionDetailList
        ? []
        : this.question.questionDetailList.filter(m => m.questionType !== 'explain')
    },
    allQuestionDetailList: function() {
      return !this.question || !this.question.questionDetailList
        ? []
        : this.question.questionDetailList
    }
  },
  mounted() {
    let current = this.$store.state.questionnaire.questionVo.question
    if (!current) {
      this.$store.commit('QUESTION_MODULE_RESTORE_QUESTION')
      current = this.$store.state.questionnaire.questionVo.question
    }
    getQuestionDetailListByQuestionId({ questionId: current.questionId }).then(res => {
      current.questionDetailList = res.data
      // 按照indexOrder排序一下子先
      questionSort(current)
      this.type = this.$store.state.questionnaire.questionVo.type
      this.question = current
      this.hide = current && current.hideQuestionNumber === '1'
      this.random = current && current.randomQuestionFlag === '1'
    })
  },
  methods: {
    // 跳到指定的位置
    handleJump(no) {
      console.log(no)
    },
    handleCloseDetailDialog(cancel) {
      if (!cancel) {
        if (this.question) {
          if (this.question.questionDetailList) {
            this.question.questionDetailList.push(this.addQuestionDetail)
          }
        }
      }
      this.addDetailDialogVisible = false
    },
    handleAddQuestionDetail(type) {
      this.addQuestionDetail = {
        questionType: type,
        indexOrder: this.question.questionDetailList ? this.question.questionDetailList.filter(m => m.questionType !== 'explain').length + 1 : 1,
        no: this.question.questionDetailList ? this.question.questionDetailList.length + 1 : 1,
        questionDetailItemList: [],
        required: '0'
      }
      this.addDetailDialogVisible = true
      if (this.$refs.chooseTable) {
        this.$refs.chooseTable.init(this.addQuestionDetail.questionType, this.addQuestionDetail.required)
      }
    },
    handleFocus(no) {
      this.currentClick = no
    },
    handleBack() {
      this.$router.go(-1)
    },
    handleSavaQuestion() {
      updateQuestion(this.question).then(mm => {
        if (mm.data) {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
        }
      })
    },
    // 超过多少个字符 显示...
    handleSubStringLength(str, length) {
      let new_str = ''
      if (str.length > length) {
        new_str = str.substring(0, length)
        new_str += '...'
      } else {
        new_str = str
      }
      return new_str
    },
    // 删除当前题目
    handleDeleteQuestion(no) {
      for (const item of this.question.questionDetailList) {
        if (item.no === no) {
          const index = this.question.questionDetailList.indexOf(item)
          this.question.questionDetailList.splice(index, 1)
          break
        }
      }
    },
    // 向上移动
    handleUpItem(no) {
      const list = this.question.questionDetailList
      for (let crtIndex = 0; crtIndex <= list.length; crtIndex++) {
        if (list[crtIndex].no === no) {
          if (crtIndex === 0) {
            return
          }
          this.currentClick = this.currentClick - 1
          // 在上一项插入该项
          list.splice(crtIndex - 1, 0, list[crtIndex])
          // 删除后一项
          list.splice(crtIndex + 1, 1)
          this.handleOrderIndex()
          break
        }
      }
    },
    // 向下移动
    handleDownItem(no) {
      const list = this.question.questionDetailList
      for (let crtIndex = 0; crtIndex <= list.length; crtIndex++) {
        if (list[crtIndex].no === no) {
          if (crtIndex === (list.length - 1)) {
            return
          }
          this.currentClick = this.currentClick + 1
          // 在下一项插入该项
          list.splice(crtIndex + 2, 0, (list[crtIndex]))
          // 删除前一项
          list.splice(crtIndex, 1)
          this.handleOrderIndex()
          break
        }
      }
    },
    handleOrderIndex() {
      let index = 0
      let no = 0
      this.question.questionDetailList.forEach(mm => {
        if (mm.questionType !== 'explain') {
          index++
          mm.indexOrder = index
        }
        no++
        mm.no = no
      })
    }
  }
}
</script>

<style lang="scss" scope>
.ul-outline {
  list-style: none;
  padding-left: 12px;
  cursor: pointer;

  li {
    span {
      font-weight: bold;
      margin-right: 4px;
    }
    font-size: 12px;
    border-bottom: 1px solid #F2F2F2;
  }
}

.question-edit {

  .edit-header {
    margin-bottom: 6px;
    height: 50px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-radius: 4px;
    padding-left: 16px;

    .el-checkbox {
      margin-top: 8px;
    }

    .header-right {
      float: right;
      margin-right: 20px;
      margin-top: 6px;
    }
  }
  .el-container {
    .el-aside {
      padding: 0;
      margin-right: 20px;
      background-color: white;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      margin-bottom: 0;

      .el-tabs__header {
        margin-bottom: 0;
      }

      .el-collapse-item {
        padding-left: 12px;
        padding-right: 12px;

        .el-collapse-item__arrow {
          margin-right: 0;
        }
      }

      .el-collapse-item__header {
        font-weight: bold;
      }

      .el-collapse-item__content {
        padding-bottom: 0;
        line-height: 32px;
      }

      .type-list .type-list-font .choose-list {
        text-align: center;
        font-size: 12px;

        a {
          display: block;
          border-radius: 30px;
          // background-color: #63979310;
          // color: black;
        }

        a:hover {
          background-color: #0095FF;
          color: white;
        }
      }
    }
    .el-main {
      padding: 0 0 2px 0 !important;
      background-color: white;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

      .infinite-list {
        padding: 0 2px 0 2px;
        margin: 2px 0 0 0;
      }
    }
  }
}
</style>
